<template>
  <div class="dialogVideoContent">
    <img :src="picUrl">
    <div class="detailContent">
      <div class="detailContent-left">
        <div class="dialog-date">{{ dateFilter(publishTime, "MM/dd/yyyy") }}</div>
        <div class="dialog-title">{{ title }}</div>
        <p class="dialog-dsc">{{ des }}</p>
      </div>
      <div class="detailContent-right">
        <div class="emc-btn" @click="download(hqPicUrl && hqPicUrl!= 'null'? hqPicUrl : picUrl)"></div>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import {ref} from "vue";

const props = defineProps({
  des: {
    type: String,
    required: false,
  },
  title: {
    type: String,
    required: false,
  },
  publishTime: {
    type: String,
    required: false,
  },
  picUrl: {
    type: String,
    required: false,
  },
  hqPicUrl: {
    type: String,
    required: false,
  },
});

const picUrl = ref(props.picUrl);
const hqPicUrl = ref(props.hqPicUrl)
const publishTime = ref(props.publishTime);
const title = ref(props.title);
const des = ref(props.des);

const config = useRuntimeConfig();
const apiURL = config.public.apiURL;

const download = (link: string) => {
  let url = link;
  let fileName = url.slice(url.lastIndexOf("/") + 1); //下载的文件名换成自己的
  // let fileName = item.title; //dayjs
  const a = document.createElement('a');
  a.href = `/api/file/download/image/${fileName}`;
  a.download = fileName;
  // a.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
  a.click();
}

</script>

<style scoped lang="scss">
//.dialogContent {

.dialogVideoContent img {
  width: 1024px;
}

.detailContent {
  width: 1024px;
  padding: 10px 30px;


  .detailContent-left {
    width: 900px;
    display: inline-block;
    padding: 10px;

    .dialog-title {
      line-height: 32px;
      font-size: 22px;
      color: #000;
      // margin-top: 12px;
      font-weight: 600;

    }

    .dialog-dsc {
      line-height: 22px;
      color: #000;
      font-size: 100%;

    }

    .dialog-date {
      margin-top: 12px;
      font-size: 12px;
      color: rgba(0, 0, 0, 0.25);
    }
  }

  .detailContent-right {
    width: 50px;
    display: inline-block;

    .emc-btn {
      width: 32px;
      height: 32px;
      background-image: url('/images/home/组23@2x.png');
      background-size: cover;
      border: 2px dashed rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: background-color .3s;
    }
  }


}

//}
</style>
